import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_axrjc/style.dart';
import 'package:flutter_axrjc/widget/custom_text_field.dart';
import 'package:get/get.dart';

import 'logic.dart';

class PostHelpPage extends StatelessWidget {
  const PostHelpPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<PostHelpLogic>();
    final state = Get.find<PostHelpLogic>().state;

    return Scaffold(
      backgroundColor: const Color(0xffF3F6F9),
      appBar: AppBar(
        centerTitle: true,
        title: const Text("发布帮助"),
        actions: [
          TextButton(
            onPressed: logic.post,
            style: ButtonStyle(
              backgroundColor: MaterialStateProperty.resolveWith<Color>(
                (Set<MaterialState> states) {
                  if (states.contains(MaterialState.pressed)) {
                    return orangeColor;
                  } else if (states.contains(MaterialState.hovered)) {
                    return orangeColor;
                  }
                  return primaryColor;
                },
              ),
              elevation:
                  MaterialStateProperty.all<double>(4.0), // Define elevation.
            ),
            child: const Text("发布"),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Obx(() {
                return CustomTextField(
                  value: state.title.value,
                  onChanged: (t) {
                    state.title.value = t;
                  },
                  inputDecoration: const InputDecoration(hintText: '请输入标题'),
                );
              }),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: InkWell(
                  onTap: logic.selectHomePic,
                  child: Container(
                    height: 200,
                    width: double.infinity,
                    decoration: BoxDecoration(
                        color: Colors.white,
                        boxShadow: [
                          BoxShadow(
                              color: Colors.grey.withAlpha(20), blurRadius: 5)
                        ],
                        borderRadius: BorderRadius.circular(5)),
                    child: Obx(() {
                      return state.homePic.value.isNotEmpty
                          ? Stack(
                              children: [
                                Positioned.fill(
                                  child: Image.file(
                                    File(state.homePic.value),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                                Positioned(
                                  top: 0,
                                  right: 0,
                                  child: InkWell(
                                    onTap: () {
                                      state.homePic.value = '';
                                    },
                                    child: const Padding(
                                      padding: EdgeInsets.all(8.0),
                                      child: Icon(
                                        Icons.close,
                                        color: Colors.red,
                                      ),
                                    ),
                                  ),
                                )
                              ],
                            )
                          : const Center(
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Icon(
                                    Icons.add,
                                    color: Colors.grey,
                                  ),
                                  Text(
                                    "文章首图",
                                    style: TextStyle(color: Colors.grey),
                                  )
                                ],
                              ),
                            );
                    }),
                  ),
                ),
              ),
              Obx(() {
                return CustomTextField(
                  value: state.content.value,
                  onChanged: (t) {
                    state.content.value = t;
                  },
                  inputDecoration: const InputDecoration(
                    hintText: '请输入内容...',
                    border: InputBorder.none,
                  ),
                  maxLines: 10,
                );
              }),
              Obx(() {
                return GridView.builder(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    gridDelegate:
                        const SliverGridDelegateWithFixedCrossAxisCount(
                            crossAxisCount: 3,
                            crossAxisSpacing: 5,
                            mainAxisSpacing: 5,
                            childAspectRatio: 1),
                    itemCount: state.imgList.length,
                    itemBuilder: (BuildContext context, int index) {
                      var bean = state.imgList[index];
                      if (bean == "add") {
                        return GestureDetector(
                          onTap: logic.addImg,
                          child: Container(
                            decoration: BoxDecoration(
                                color: Colors.white,
                                boxShadow: [
                                  BoxShadow(
                                      color: Colors.grey.withAlpha(20),
                                      blurRadius: 5)
                                ],
                                borderRadius: BorderRadius.circular(5)),
                            child: const Icon(
                              Icons.add,
                              color: Colors.grey,
                            ),
                          ),
                        );
                      } else {
                        return Stack(
                          children: [
                            Container(
                              decoration: BoxDecoration(
                                  color: Colors.white,
                                  boxShadow: [
                                    BoxShadow(
                                        color: Colors.grey.withAlpha(20),
                                        blurRadius: 5)
                                  ],
                                  borderRadius: BorderRadius.circular(5),
                                  image: DecorationImage(
                                      image: Image.file(File(bean)).image,
                                      fit: BoxFit.cover)),
                            ),
                            Positioned(
                                top: 0,
                                right: 0,
                                child: GestureDetector(
                                  onTap: () {
                                    state.originImgList.remove(bean);
                                    logic.refreshImg();
                                  },
                                  child: const Padding(
                                    padding: EdgeInsets.all(8.0),
                                    child: Icon(
                                      Icons.close,
                                      color: Colors.white,
                                    ),
                                  ),
                                ))
                          ],
                        );
                      }
                    });
              }),
              const SizedBox(
                height: 10,
              ),
              const Padding(
                padding: EdgeInsets.symmetric(vertical: 20),
                child: Text(
                  "请选择一个分类",
                  style: TextStyle(color: Colors.grey),
                ),
              ),
              Obx(() {
                return Wrap(
                  children: state.tabs
                      .map((element) => Padding(
                            padding: const EdgeInsets.symmetric(horizontal: 5),
                            child: InkWell(
                              onTap: () {
                                state.currentTab.value = element;
                              },
                              child: Obx(() {
                                return Padding(
                                  padding:
                                      const EdgeInsets.symmetric(vertical: 5),
                                  child: Container(
                                      padding: const EdgeInsets.symmetric(
                                          horizontal: 15, vertical: 5),
                                      decoration: BoxDecoration(
                                          color:
                                              state.currentTab.value != element
                                                  ? orangeColor.withAlpha(100)
                                                  : orangeColor,
                                          borderRadius:
                                              BorderRadius.circular(10)),
                                      child: Text(
                                        "${element.helpCategoriesName}",
                                        style: const TextStyle(
                                            color: Colors.white),
                                      )),
                                );
                              }),
                            ),
                          ))
                      .toList(),
                );
              }),
            ],
          ),
        ),
      ),
    );
  }
}
